<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/topline.css">
    <script src="js/vue.js"></script>
    <script src='js/axios.js'></script>
    <title>头条</title>
</head>

<body>
    <header class="mui-bar mui-bar-nav head">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title nav-title">头条</h1>
    </header>
    <main>
        <div id="app">
            <div class="mui-content main">
                <!--内容居中显示-->
               
                <div class="outside" v-for="text in topList" @click="urls(text.id)">
                    <div class="flex" >
                        <div class="tn">
                            <!--标题-->
                            <p class="title">{{text.title}}</p>
                        </div>
                        <!--内容图片-->
                        <img :src="text.img" alt="" class="img1">
                    </div>
                    <div class="x"></div>
                </div>
            </div>
            <!--下划线-->
            <div class="x"></div>
        </div>
    </main>
    <footer>
    </footer>
    <script src="js/mui.min.js"></script>
    <script>
        const API_PROXY = 'https://bird.ioliu.cn/v1/?url='
        new Vue({
            el: '#app',
            data: {
                topList:'',
                // sites: [{
                //     title: '如果你不会停止，千万不要开始。',
                //     name: '美国刹车系统',
                //     img: './images/picture_xiangqing.png'
                // }, 
                // {
                //     title: '如果你不会停止，千万不要开始。',
                //     name: '美国刹车系统',
                //     img: './images/picture_xiangqing.png'
                // }],
            },
            created() {
                this.bring();
            },
            methods: {
                // 获取文章列表
                bring() {
                    axios.post(API_PROXY + "mingpian.32one.top/Index/Index/getArticleList")
                        .then(res => {
                            console.log(res.data.data)
                            this.topList = res.data.data;
                        })
                },
                urls(id){
                    location.href="details.html?id="+id;
                }
            }

        })
    </script>
</body>

</html>